<template>
  <div class="attrs" v-clickoutside="()=>close()">
    <span @click="open()" class="ellipsis">
      {{goods.attrsText}}
      <i class="iconfont icon-angle-right"></i>
    </span>
    <div class="cart-sku-dialog" v-if="show">
      <transition>
        <div class="box" v-if="skuGoods.specs && skuGoods.skus" key="box">
          <goods-sku
            ref="sku"
            :sku="skuGoods.skus"
            :attrs="skuGoods.specs"
            :currentSkuId="goods.skuId"
            @on-change="changeSku"
          ></goods-sku>
          <xtx-button @click="submit" class="btn" size="small">确认</xtx-button>
        </div>
        <div v-else class="loading" key="loading">
          <div class="item">
            <xtx-skeleton width="30px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="50px" height="50px"></xtx-skeleton>
            <xtx-skeleton width="50px" height="50px"></xtx-skeleton>
          </div>
          <div class="item">
            <xtx-skeleton width="30px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
          </div>
          <div class="item">
            <xtx-skeleton width="30px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
          </div>
          <div class="item">
            <xtx-skeleton width="30px" height="20px"></xtx-skeleton>
            <xtx-skeleton width="80px" height="20px"></xtx-skeleton>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import GoodsSku from './goods-sku.vue'
export default {
  name: 'cart-sku-dialog',
  components: { GoodsSku },
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      show: false,
      skuGoods: {},
      skuInfo: {}
    }
  },
  methods: {
    changeSku (skuObj) {
      this.skuInfo = skuObj
    },
    submit () {
      if (this.skuInfo.skuId) {
        this.$emit('on-submit', this.skuInfo)
      }
    },
    open () {
      if (this.show) {
        this.close()
      } else {
        this.show = true
        this.$http.get('goods/sku/' + this.goods.id).then(res => {
          this.skuGoods = res.data.result
        })
      }
    },
    close () {
      this.show = false
      this.skuGoods = {}
    }
  }
}
</script>

<style scoped lang='less'>
.attrs {
  height: 28px;
  border: 1px solid #f5f5f5;
  line-height: 26px;
  color: #999;
  padding-left: 5px;
  position: relative;
  display: inline-block;
  padding-right: 30px;
  > span {
    max-width: 200px;
    display: inline-block;
    cursor: pointer;
    .icon-angle-right {
      transform: rotate(90deg) scale(0.8);
      position: absolute;
      top: 0;
      right: 4px;
    }
  }
}
.v{
  &-enter-to,&-leave {
    opacity: 1;
  }
  &-enter-active{
    transition: opacity .5s .5s;
  }
  &-leave-active{
    transition: opacity .5s .5s;
    position: absolute;
    top: 0;
    width: 100%;
  }
  &-enter,&-leave-to{
    opacity: 0;
  }
}
.loading {
  .xtx-skeleton{
    margin-right: 20px;
  }
  .item {
    margin-top: 20px;
    padding-left: 10px;
    display: flex;
    align-items: center;
  }
}
.cart-sku-dialog {
  width: 410px;
  height: 260px;
  background: #ffffff;
  border: 1px solid @xtxColor;
  border-radius: 4px;
  box-shadow: 1px 1px 5px #e3f9f4;
  position: absolute;
  top: 40px;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding:0 10px 20px 10px;
  &::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-right: 1px solid @xtxColor;
    border-top: 1px solid @xtxColor;
    transform: scale(0.8, 1) rotate(-45deg);
    background: #fff;
    box-shadow: 2px -2px 2px #e3f9f4;
  }
  .btn {
    margin-left: 60px;
    margin-top: 20px;
  }
}
</style>
